﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery SwitchButton, SwitchButton Widget, jqxSwitchButton" />
    <meta name="description" content="jqxSwitchButton is jQuery widget with functionality similar to checkbox. It has two states - check and uncheck (on/off). The user can switch between the different states using mouse clicks or drag and drop." />
    <title id='Description'>jqxSwitchButton is jQuery widget with behavior similar to the
        jqxCheckBox. It has two states - checked and unchecked (on/off). The user can switch
        between the different states using mouse clicks or by drag and drop of the thumb.
    </title>
    <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../scripts/jquery-1.8.0.min.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxswitchbutton.js"></script>
    <script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="simulator.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            prepareDemo("switchbutton");
            $('#button1').jqxSwitchButton({ height: 28, width: 81, checked: true });
            $('#button2').jqxSwitchButton({ height: 28, width: 81, checked: true });
            $('#button3').jqxSwitchButton({ height: 28, width: 81, checked: true });
            $('#button4').jqxSwitchButton({ height: 28, width: 81, checked: true });
            $('#button5').jqxSwitchButton({ height: 28, width: 81, checked: false });
            $('#button6').jqxSwitchButton({ height: 28, width: 81, checked: true });
            $('#button7').jqxSwitchButton({ height: 28, width: 81, checked: true });

            function applyCustomTheme() {
                $('#button1, #button2, #button3, #button4, #button5, #button6, #button7').jqxSwitchButton('theme', 'custom');
            }

            applyCustomTheme();
         });
    </script>
    <style type="text/css">
        .jqx-switchbutton-label-on-custom
        {
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3065c4', endColorstr='#75adfc',GradientType=0 ); /* IE6-9 */
            background-image: linear-gradient(bottom, rgb(118,174,252) 20%, rgb(48,103,197) 62%);
            background-image: -o-linear-gradient(bottom, rgb(118,174,252) 20%, rgb(48,103,197) 62%);
            background-image: -moz-linear-gradient(bottom, rgb(118,174,252) 20%, rgb(48,103,197) 62%);
            background-image: -webkit-linear-gradient(bottom, rgb(118,174,252) 20%, rgb(48,103,197) 62%);
            background-image: -ms-linear-gradient(bottom, rgb(118,174,252) 20%, rgb(48,103,197) 62%);
            background-image: -webkit-gradient(
	            linear,
	            left bottom,
	            left top,
	            color-stop(0.2, rgb(118,174,252)),
	            color-stop(0.62, rgb(48,103,197))
            );
            color: #fff;
            text-shadow: 0px -1px 1px #000;
        }
        
        .jqx-switchbutton-label-off-custom
        {
            background: #cfcfcf; /* Old browsers */
            background: -moz-linear-gradient(top,  #cfcfcf 0%, #fefefe 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cfcfcf), color-stop(100%,#fefefe)); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top,  #cfcfcf 0%,#fefefe 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top,  #cfcfcf 0%,#fefefe 100%); /* Opera 11.10+ */
            background: -ms-linear-gradient(top,  #cfcfcf 0%,#fefefe 100%); /* IE10+ */
            background: linear-gradient(top,  #cfcfcf 0%,#fefefe 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cfcfcf', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */
            color: #808080;
        }
        .jqx-switchbutton-thumb-custom
        {
            background: #bababa; /* Old browsers */
            background: -moz-linear-gradient(top,  #bababa 0%, #fefefe 100%); /* FF3.6+ */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bababa), color-stop(100%,#fefefe)); /* Chrome,Safari4+ */
            background: -webkit-linear-gradient(top,  #bababa 0%,#fefefe 100%); /* Chrome10+,Safari5.1+ */
            background: -o-linear-gradient(top,  #bababa 0%,#fefefe 100%); /* Opera 11.10+ */
            background: -ms-linear-gradient(top,  #bababa 0%,#fefefe 100%); /* IE10+ */
            background: linear-gradient(top,  #bababa 0%,#fefefe 100%); /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bababa', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */
            border: 1px solid #aaa;
            -webkit-box-shadow: -6px 0px 17px 1px #275292;
            -moz-box-shadow: -6px 0px 17px 1px #275292;
            box-shadow: -6px 0px 17px 1px #275292;
        }
        .jqx-switchbutton-custom
        {
            border: 1px solid #999999;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
        }
        
        #settings-panel
        {
        }
        .settings-section
        {
            background-color: #f7f7f7;
            height: 46px;
            width: 363px;
            border: 1px solid #b4b7bc;
            border-bottom-width: 0px;
        }
        .settings-section-top
        {
            border-bottom-width: 0px;
        }
        .sections-section-bottom
        {
            border-bottom-width: 1px;
        }
        .settings-label
        {
            font-weight: bold;
            font-family: Sans-Serif;
            font-size: 14px;
            margin-left: 14px;
            margin-top: 15px;
            float: left;
        }
        .settings-melody
        {
            color: #385487;
            font-family: Sans-Serif;
            font-size: 14px;
            display: inline-block;
            margin-top: 7px;
        }
        .settings-setter
        {
            float: right;
            margin-right: 14px;
            margin-top: 8px;
        }
        .events-container
        {
            margin-left: 20px;
        }
        #theme
        {
            margin-left: 20px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body class='default'>
    <div id="demoContainer" style="margin-left: 220px; width: 460px; height: 855px; overflow: hidden; background-image: url(../images/iphone.png);">
        <div id="container" style="background: #f7f7f7; margin-left: 46px; height: 518px;
            width: 366px; margin-top: 185px;">
            <div id="switchbutton">
                <div class="settings-section-top settings-section">
                    <div class="settings-label">
                        Ringtone</div>
                    <div class="settings-setter">
                        <div class="settings-melody">
                            Marimba</div>
                    </div>
                </div>
                <div class="settings-section-top settings-section">
                    <div class="settings-label">
                        Text Tone</div>
                    <div class="settings-setter">
                        <div class="settings-melody">
                            Tri-tone</div>
                    </div>
                </div>
                <div class="settings-section">
                    <div class="settings-label">
                        New Mail</div>
                    <div class="settings-setter">
                        <div id="button1">
                        </div>
                    </div>
                </div>
                <div class="settings-section">
                    <div class="settings-label">
                        Sent Mail</div>
                    <div class="settings-setter">
                        <div id="button2">
                        </div>
                    </div>
                </div>
                <div class="settings-section">
                    <div class="settings-label">
                        Tweet</div>
                    <div class="settings-setter">
                        <div id="button7">
                        </div>
                    </div>
                </div>
                <div class="settings-section">
                    <div class="settings-label">
                        Calendar Alerts</div>
                    <div class="settings-setter">
                        <div id="button3">
                        </div>
                    </div>
                </div>
                <div class="settings-section">
                    <div class="settings-label">
                        Lock Sounds</div>
                    <div class="settings-setter">
                        <div id="button4">
                        </div>
                    </div>
                </div>
                <div class="settings-section">
                    <div class="settings-label">
                        Multitasking Gestures</div>
                    <div class="settings-setter">
                        <div id="button6">
                        </div>
                    </div>
                </div>
                <div class="settings-section">
                    <div class="settings-label">
                        Lock Rotation</div>
                    <div class="settings-setter">
                        <div id="Div2">
                        </div>
                    </div>
                </div>
                <div class="settings-section">
                    <div style="margin-top: 15px;" class="settings-label settings-melody">
                        Mute</div>
                    <div style="margin-top: 15px;" class="settings-setter">
                        <div id="Div3">
                            <img src="../jqwidgets/styles/images/check_black.png" />
                        </div>
                    </div>
                </div>
                <div class="sections-section-bottom settings-section">
                    <div class="settings-label">
                        Keyboard Clicks</div>
                    <div class="settings-setter">
                        <div id="button5">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
